<!-- 左侧浮动涉交 -->
<template>
  <div class="share">
    <ul class="share_list">
      <li class="share_list_item">
        <div class="share_list_item_link">
          <img alt="" class="share_list_item_img" src="@/assets/images/float-left/weixin.png" @click="showBox = true" />
          <Transition name="fade">
            <div class="share_list_item_imgCodeBox" v-if="showBox">
              <div class="share_list_item_imgCodeBox_close" @click="showBox = false">
                +
              </div>
              <img alt="" class="share_list_item_imgCode" src="@/assets/images/float-left/code_weixin.png" />
            </div>
          </Transition>
        </div>
      </li>
      <li class="share_list_item">
        <a href="https://www.linkedin.com/in/pchiexpo" class="share_list_item_link" target="_blank">
          <img alt="" class="share_list_item_img" src="@/assets/images/float-left/linkedin.png" />
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      showBox: false,
    };
  },
  computed: {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
/* 左下角分享 */
.share {
  position: fixed;
  left: 0%;
  bottom: 110px;
  z-index: 9999;
  &_list_item {
    position: relative;
    text-align: center;
    width: 100%;
    transition: width 0.15s ease-in-out;
    cursor: pointer;
    &:hover {
      width: 130%;
    }
    &_img {
      width: 40px;
    }
    /* 二维码容器 */
    &_imgCodeBox {
      position: absolute;
      top: 0;
      left: 42px;
      width: 240px;
      /* 关闭按钮 */
      &_close {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 24px;
        height: 24px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        background: #e35191;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        transform: rotate(45deg);
        font-size: 30px;
        box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.5);
      }
    }
    /* 二维码 */
    &_imgCode {
      width: 240px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
.fade{
  &-enter{
    &-active{
      transition: all 1s linear;
    }
    &-from{
      opacity: 0;
    }
  }
  &-leave{
    &-active{
      transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
    }
    &-to{
      opacity: 0;
    }
  }
}
</style>
